<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>学生页</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" href="css/fontastic.css">
    <!-- Google fonts - Poppins -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="img/favicon.ico">
    <!-- Tweaks for older IEs-->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>

<body>
<div class="page">
    <!-- Main Navbar-->
    <header class="header">
        <nav class="navbar">

            <div class="container-fluid">
                <div class="navbar-holder d-flex align-items-center justify-content-between">
                    <!-- Navbar Header-->
                    <div class="navbar-header">
                        <!-- Navbar Brand --><a href="index" class="navbar-brand d-none d-sm-inline-block">
                        <div class="brand-text d-none d-lg-inline-block"><span>欢迎 </span><strong>管理员</strong></div>
                    </a>
                        <!-- Toggle Button--><a id="toggle-btn" href="#"
                                                class="menu-btn active"><span></span><span></span><span></span></a>
                    </div>
                    <!-- Navbar Menu -->
                    <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
                        <li class="nav-item"><a href="login" class="nav-link logout"> <span
                                class="d-none d-sm-inline">退出</span><i class="fa fa-sign-out"></i></a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="page-content d-flex align-items-stretch">
        <!-- Side Navbar -->
        <nav class="side-navbar">
            <ul class="list-unstyled">
                <li><a href="index"> <i class="icon-home"></i>数据视点</a></li>
                <li class="active"><a href="#exampledropdownDropdown" aria-expanded="false" data-toggle="collapse"> <i
                        class="icon-interface-windows"></i>管理</a>
                    <ul id="exampledropdownDropdown" class="collapse list-unstyled ">
                        <li class="active"><a href="studentTable">学生</a></li>
                        <li><a href="teacherTable">教师</a></li>
                        <li><a href="courseTable">课程信息</a></li>
                        <li><a href="selectionTable">课程评价</a></li>
                        <li><a href="newsTable">资讯管理</a></li>

                    </ul>
                </li>
                <li><a href="news"> <i class="icon-padnote"></i>资讯发布</a></li>
            </ul>
        </nav>
        <div class="content-inner">
            <!-- Page Header-->
            <header class="page-header">
                <div class="container-fluid">
                    <h2 class="no-margin-bottom">学生表</h2>
                </div>
            </header>
            <section class="tables">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="mx-5 my-2">
                                    <button type="button" class="btn btn-success hidden-sm-down pull-right"
                                            data-toggle="modal"
                                            data-target="#myModal">
                                        添加信息
                                    </button>
                                </div>

                                <div class="card-body">
                                    <div class="table-responsive">
                                        <div id="app" class="col-12">
                                            <v-table is-horizontal-resize style="width:100%" :columns="columns"
                                                     :table-data="tableData"
                                                     :cell-edit-done="cellEditDone" row-hover-color="#eee"
                                                     row-click-color="#edf7ff"
                                                     @on-custom-comp="customCompFunc"></v-table>
                                            <div class="m-4">
                                                <v-pagination :total="total"
                                                              :layout="['total', 'prev', 'pager', 'next']"
                                                              @page-change="pageChange1">
                                                </v-pagination>
                                            </div>
                                        </div>
                                        <div class="mx-3">
                                            <ul class="pagination" id="pagination1"></ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Page Footer-->
            <footer class="main-footer">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-6">
                            <p>在线学习 &copy; 2019 慕随心</p>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">


            <div class="modal-header">
                <h4 class="modal-title">添加学生信息</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <div class="modal-body">
                <form action="" id="addForm">
                    <div class="form-group">
                        <label for="">名字</label>
                        <input type="text" name="studentName" id="" class="form-control" placeholder=""
                               aria-describedby="helpId"
                               required onkeyup="this.value=this.value.replace(/\s+/g,'')">
                    </div>
                    <div class="form-group">
                        <label for="sel1">性别</label>
                        <select class="form-control" id="sel1" name="studentSex">
                            <option>女</option>
                            <option>男</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="sel1">职业</label>
                        <select class="form-control" id="sel1" name="studentOc">
                            <option>大学生</option>
                            <option>IT</option>
                            <option>自由职业</option>
                            <option>公务员</option>
                            <option>其他</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="">年龄</label>
                        <input type="number" name="studentAge" id="" class="form-control" placeholder=""
                               aria-describedby="helpId"
                               required>
                    </div>
                    <h5 class="modal-title text-danger">添加后管理员将无法修改信息,请仔细核对</h5>
                    <button type="submit" class="btn btn-primary">添加</button>
                </form>
            </div>


            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- JavaScript files-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper.js/umd/popper.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/jquery.cookie/jquery.cookie.js"></script>
<script src="vendor/chart.js/Chart.min.js"></script>
<script src="vendor/jquery-validation/jquery.validate.min.js"></script>
<!-- Main File-->
<script src="js/front.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-easytable/umd/css/index.css">
<script src="https://unpkg.com/vue-easytable/umd/js/index.js"></script>
</body>
<script>
    new Vue({
        el: '#app',
        methods: {
            pageChange1(pageIndex) {
                axios.get(' /onlineAdmain/api/student', {
                    params: {
                        num: pageIndex
                    }
                })
                    .then(response => (this.tableData = response["data"]["studentData"], this.total = response["data"]["totalData"]))
            },

            pageSizeChange1(pageSize) {
                console.log(this.tableData)
            },
            customCompFunc(params) {
                if (confirm("确定删除" + params.rowData["studentName"] + "?" + "将会删除此学生所有信息")) {
                    var _this = this;
                    axios.delete(" /onlineAdmain/api/student", {
                        params: {
                            studentId: params.rowData["studentId"]
                        }
                    }).then(function (response) {
                        if (response["data"]["status"] == "200") {
                            _this.$delete(_this.tableData, params.index);
                        }
                        if (response["data"]["status"] == "400") {
                            alert(response["data"]["msg"]);
                            _this.$delete(_this.tableData, params.index);
                        }
                    });
                }
            }
        },
        created() {
            axios.get(' /onlineAdmain/api/student', {
                params: {
                    num: 1
                }
            })
                .then(response => (this.tableData = response["data"]["studentData"], this.total = response["data"]["totalData"]))
        },
        data: function () {
            return {
                total: 0,
                tableData: null,
                columns: [
                    {field: 'studentId', title: 'id', width: 200, titleAlign: 'center', columnAlign: 'center'},
                    {field: 'studentName', title: '姓名', width: 200, titleAlign: 'center', columnAlign: 'center'},
                    {field: 'studentSex', title: '性别', width: 100, titleAlign: 'center', columnAlign: 'center'},
                    {field: 'studentAge', title: '年龄', width: 100, titleAlign: 'center', columnAlign: 'center'},
                    {field: 'studentOc', title: '职业', width: 200, titleAlign: 'center', columnAlign: 'center'},
                    {
                        field: 'custome-adv',
                        title: '操作',
                        width: 100,
                        titleAlign: 'center',
                        columnAlign: 'center',
                        componentName: 'table-operation',
                        isResize: true
                    }
                ]
            }
        }
    })
    Vue.component('table-operation', {
        template: `
        <button class="btn btn-danger" href="" @click.stop.prevent="deleteRow(rowData,id)">删除</button>
        `,
        props: {
            rowData: {
                type: Object
            },
            index: {
                type: Number
            }
        },
        methods: {
            deleteRow() {
                // 参数根据业务场景随意构造
                let params = {type: 'delete', index: this.index, rowData: this.rowData};
                this.$emit('on-custom-comp', params);

            }
        }
    })
    $(function () {
        $("#addForm").submit(function () {
            // alert("xx");
            // axios.get(' /onlineAdmain/api/student', {
            //   params: {
            //     num: 1
            //   }
            // })
            axios.post(" /onlineAdmain/api/student", $("#addForm").serialize())

        });


    });
</script>

</html>